<template>
	<el-dialog v-model="show" :title="isEdit ? '编辑角色组' : '添加角色组'" width="900px" class="role-group-dialog">
		<div class="dialog-content">
			<el-form :model="itemInfo" label-width="40px" class="form-container">
				<el-form-item label="名称">
					<el-input v-model="itemInfo.name" placeholder="请输入角色组名称" />
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="itemInfo.status">
						<el-radio-button :value="1">启用</el-radio-button>
						<el-radio-button :value="0">禁用组内账号</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="itemInfo.remark" type="textarea" placeholder="请输入备注信息" :rows="3" />
				</el-form-item>
			</el-form>
			<div class="permission-container">
				<div class="permission-header">
					<div class="header-title">权限选择</div>
					<div class="header-actions">

					</div>
				</div>
				<div style="max-height: 50vh;overflow-y: auto;">
					<el-tree default-expand-all style="background-color: unset;" ref="treeRef" :data="menusTreeDataList"
						show-checkbox node-key="id" :props="{ label: 'name' }" />
				</div>
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="show = false" class="footer-button">取消</el-button>
				<el-button type="primary" @click="handleSave" class="footer-button"
					:loading="saveLoading">保存</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { useMenusStore } from '../../../../stores/menus'
import { useAccountStore } from '../../../../stores/account'
import { ElMessage } from 'element-plus'
export default {
	data() {
		return {
			show: false,
			itemInfo: {},
			itemInfoDefault: { status: 1 },
			menusTreeData: {
				defaultCheckedKeys: []
			},
			saveLoading: false
		}
	},
	created() {
	},
	watch: {
		show(a, b) {
			if (!a) {
				this.itemInfo = JSON.parse(JSON.stringify(this.itemInfoDefault))
			} else {
				this.$nextTick(() => {
					if (!this.itemInfo.id) {
						//新增
						this.$refs.treeRef.setCheckedKeys([])
						this.itemInfo = JSON.parse(JSON.stringify(this.itemInfoDefault))
					} else {
						//编辑
						this.$refs.treeRef.setCheckedKeys(this.itemInfo.tree_menus_ids)
					}
				})
			}
		}
	},
	computed: {
		isEdit() {
			return this.itemInfo.id ? true : false
		},
		menusStore() {
			return useMenusStore()
		},
		menusTreeDataList() {
			return this.menusStore.menuOriginData
		},
		accountStore() {
			return useAccountStore()
		}
	},
	methods: {
		handleSave() {
			this.saveLoading = true
			let data = JSON.parse(JSON.stringify(this.itemInfo))
			//半开 + 已选
			data.menus_ids = this.$refs.treeRef.getCheckedKeys().concat(this.$refs.treeRef.getHalfCheckedKeys())
			//不保留半开,支撑tree回显
			data.tree_menus_ids = this.$refs.treeRef.getCheckedKeys()
			this.accountStore.editAccountGroup(data).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.show = false
				ElMessage.success(res.message)
				this.$emit("editSuccess")
			}).catch(err => {
				ElMessage.error("编辑失败," + err.message)
			}).finally(() => {
				this.saveLoading = false
			})
		},
	}
}
</script>
<style lang="less" scoped>
.role-group-dialog {
	.dialog-content {
		display: flex;
		gap: 24px;

		.form-container {
			width: 400px;
			border-radius: 8px;
			border: 1px solid #e5e7eb;
			background-color: rgba(249, 250, 251, 0.5);
			padding: 16px;
		}

		.permission-container {
			flex: 1;
			border-radius: 8px;
			border: 1px solid #e5e7eb;
			background-color: rgba(249, 250, 251, 0.5);
			padding: 16px;

			.permission-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8px;

				.header-title {
					font-weight: 500;
				}

				.header-actions {
					display: flex;
					gap: 0px;

				}
			}
		}
	}

	.dialog-footer {
		display: flex;
		justify-content: flex-end;

		.footer-button {
			white-space: nowrap;
		}
	}

	.action-button {
		white-space: nowrap;
		font-size: 10px;
	}
}
</style>